<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'weather.jsp' starting page</title>
  </head>
  
  <body>
  
  <input type="button" id="myBtn" value="getJSON"/>
  <span id="loading" style="display:none">
  	<img src="img/ajax.gif"/>
  </span>
  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
  	
  	$(document).ready(function(){
  		
  		$("#myBtn").click(function(){
  			$.ajax({
  				url:"json.jspx",
  				type:"GET",
  				timeout:2000,
  				success:function(data){
  					$(data).each(function(){
  	  					alert(this.name);
  	  				});
  				},
  				error:function(){
  					alert("ajax error");
  				},
  				complete:function(){
  					$("#loading").hide();
  				},
  				beforeSend:function(){
  					$("#loading").show();
  				}
  			});
  			/*$.get("json.jspx",{name:"tom",age:21},function(data){
  				$(data).each(function(){
  					alert(this.name);
  				});
  			});
  			*/
  		});
  		
  	});
	
  </script>
  </body>
</html>
